<template>
	<!-- 规格-模态层弹窗 -->
	<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
		<!-- 遮罩层 -->
		<view class="mask" @click.stop="hide"></view>
		<view class="layer attr-content" @click.stop="stopPrevent">
			<view class="a-t">
				<view class="goods-img">
					<image :src="goodsDetail.Img"></image>
				</view>
				<view class="right">
					<view class="name info-item">{{goodsDetail.Name}}</view>
					<view class="price info-item"><text><text class="symbol">¥</text>{{specSelectedPrice}}</text> <text class="oldPrice">{{specSelectedMarketPrice}}</text> </view>
					<view class="stock info-item">库存：{{specSelectedStock}}件</view>
					<view class="selected">
						已选
						<text class="selected-text">
							{{selectArr.join(' ')}}
						</text>
						<!-- <text class="selected-text" v-for="(sItem, sIndex) in specSelected.standards" :key="sIndex">
							{{sItem.name}}
						</text> -->
					</view>
				</view>
			</view>
			<view class="attr-section">
				<view v-for="(item,index) in specList" :key="index" class="attr-list">
					<text>{{item.name}}</text>
					<!-- <view class="line"></view> -->
					<view class="item-list">
						<text 
							v-for="(childItem, childIndex) in item.type" 
							:key="childIndex" class="tit item-content"
							:class="[childItem.ishow ? '' : 'noactived', subIndex[index] == childIndex ? 'actived' : '']"
							@click="selectSpec($event,index,childItem,childIndex)"
						>
							{{childItem.name}}
						</text>
					</view>
				</view>
			</view>
			<view class="buy-num dashed ">
				<text>购买数量</text>  <uni-number-box class="buy-num-add-circle" :min="1"  :value="numberValue" @change="change" />
			</view>
			<view class="btn-wapper">
				<!-- <button class="btn again-btn" @click="toggleSpec">再逛逛</button> -->
				<button v-if="type === 1 " class="btn buy-btn" @click="buy">立即购买</button>
				
				<button v-else class="btn buy-btn" @click="addCar">加入购物车</button>
			</view>
		</view>
	</view>
	<!-- 规格-模态层弹窗 end-->
</template>

<script>
	export default {
		name: 'specPopup',
		props: {
			goodsImg: {
				type:String,
				default: ''
			},
			goodsDetail: {
				type:Object,
				default:()=>{}
			}
		},
		computed: {
			specSelectedPrice() {
				let p  = +this.specSelected.price || +this.detail.price || 0
				return p.toFixed(2)
			},
			specSelectedMarketPrice() {
				let p  = +this.specSelected.MarketPrice || +this.detail.MarketPrice || 0
				return p.toFixed(2)
			},
			specSelectedStock() {
				// 显示选中商品库存 若规格为选完 显示 商品库存
				return this.specSelected.stock ? this.specSelected.stock : this.detail.gnum
			}
		},
		data() {
			return {
				detail: {
					price: 123
				},
				type: 1,
				specClass: 'none',
				specSelected:[], // 已选 规格 
				selectNum: 1, //选中数量
				specList: [], // 规格类型列表 spu规格列表
				standardInfo: [],  //sku列表
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				numberValue:1, //商品购买数量
			};
		},
		onLoad() {
			
		},
		methods: {
			//获取数据
			loadData(id) {
				let standardInfo = this.goodsDetail.ProductSpecList.map(item=>{
					const standards = item.ProductAttributesList.map((item1)=>{
						return item1.AttributesValueModel.Value
					})
					return {
						standards,
						stock:item.Stock,
						price:item.Price,
						...item
					}
				})
				let standards = this.goodsDetail.ProductAttributes.map(item=>{
					return {
						name:item.Name,
						type:item.ItemName
					}
				})
				for(let sItem of standards) {
					let child = []
					this.selectArr.push('');
					this.subIndex.push(-1);
					for(let cItem of sItem.type) {
						child.push({name:cItem,ishow:true})
					}
					sItem.type = child
				}
				
				this.specList = standards
				this.standardInfo = standardInfo
				this.detail = {
					...this.goodsDetail,
					standards,
					standardInfo
				}
				this.checkItem(); //计算sku里面规格形成路径
				this.checkInpath(-1); //传-1是为了不跳过循环
				this.setInit()	
			},
			// 设置初始值
			setInit() {
				this.subIndex.forEach((item,index)=>{
					this.$set(this.subIndex, index, 0);
				})
				console.log('selectArr',this.selectArr)
				this.selectArr.forEach((item,index)=>{
					const value = this.specList[index].type[0].name
					this.$set(this.selectArr, index, value);
				})
				this.specSelected = this.shopItemInfo[this.selectArr]
				this.selectNum = 1
			},
			//选择规格
			selectSpec(event, index1,value, index2){
				if(value.ishow) {
					if (this.selectArr[index1] != value.name) {
						this.$set(this.selectArr, index1, value.name);
						this.$set(this.subIndex, index1, index2);
					} else {
						this.$set(this.selectArr, index1, '');
						this.$set(this.subIndex, index1, -1);
					}
					this.checkInpath(index1);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.specSelected = this.shopItemInfo[this.selectArr];
						this.selectNum = 1;
					} else {
						this.specSelected = []
					}
				}
			},
			
			checkInpath(clickIndex) {
				// console.time('筛选可选路径需要的时间是');
				//循环所有属性判断哪些属性可选
				//当前选中的兄弟节点和已选中属性不需要循环
			
				for (let i = 0, len = this.specList.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					// console.log(this.specList[i])
					let len2 = this.specList[i].type.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.specList[i].type[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.specList[i].type[j], 'ishow', true);
						} else {
							this.$set(this.specList[i].type[j], 'ishow', false);
						}
					}
				}
				// console.log(this.specList)
				// console.timeEnd('筛选可选路径需要的时间是');
			},
			
			
			checkItem() {
				// console.time('计算有多小种可选路径需要的时间是');
				//计算有多小种可选路径
				let result = this.standardInfo.reduce(
					(arrs, items) => {
						// console.log(arrs,items)
						return arrs.concat(
							items.standards.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[[]]
							)
						);
					},
					[[]]
				);
				// console.timeEnd('计算有多小种可选路径需要的时间是');
			},
			
			show(type) {
				this.type = type
				this.specClass = 'show'
				// this.loadData()
			},
			hide() {
				this.specClass = 'none'
			},
			// 商品数量改变
			change(value) {
				this.numberValue = value
			},
			// 检测规格是否选则
			isValid ()  {
			 	return this.selectArr.every(item=>{
					return item !== ''
				})
			},
			buy() {
				if(!this.isValid()) {
					this.$api.msg('请选择规格')
					return
				}
				const info = this.shopItemInfo[this.selectArr.join(',')]
				this.$emit('buy', {
					...info,
					ProductSpecId: info.ProductAttributesList[0].ProductSpecId,
					ProductAttributeName: this.selectArr.join('-'),
					number: this.numberValue,
					item: this.goodsDetail
				})
			},
			addCar() {
				console.log(this.shopItemInfo)
				console.log(this.selectArr)
				if(!this.isValid()) {
					this.$api.msg('请选择规格')
					return
				}
				const info = this.shopItemInfo[this.selectArr.join(',')]
				console.log(info)
				this.$emit('addCar', {
					ProductId:info.ProductId,
					ProductSpecId: info.ProductAttributesList[0].ProductSpecId,
					number: this.numberValue,
					item: this.goodsDetail
				})
			},
			stopPrevent(){},
		}
	}
</script>

<style lang="scss" scoped>
/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	/deep/ .uni-numbox {
		height: 30px;
		line-height: 30px;
		display: flex;
		align-items: center;
		.uni-numbox__plus,
		.uni-numbox__value,
		.uni-numbox__minus {
			height: 30px;
			line-height: 30px;
			background-color: #d9d6d9;
		}
		
		.uni-numbox__plus,
		.uni-numbox__minus {
			background: #eee;
		}
		
		.uni-numbox__value {
			border: 0;
			background: #f6f6f6;
		}
	}
	
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
			background-color:#F8F8F8;
		}
	}
	&.hide {
		.mask{
			animation: hidePopup 0.2s linear both;
		}
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.layer {
		position: fixed;
		padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		z-index: 99;
		bottom: 0;
		width: 100%;
		// min-height: 40vh;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #F8F8F8;
		.a-t {
			display: flex;
			@include  dashed;
			.right {
				color: #686868;
				padding: 0 20rpx;
				.info-item {
					font-size: $uni-font-size-base;
					line-height: $uni-font-size-lg+20rpx;
				}
				
				.price {
					font-size: $uni-font-size-lg;
					color: #498FFF;
					font-weight: 600;
				}
				.symbol {
					font-size: $uni-font-size-sm - 10rpx;
				}
				.oldPrice {
					font-size: $uni-font-size-sm;
					padding-left: 10rpx;
					color: #999;
					text-decoration: line-through;
				}
			}
		}
		
		.attr-section {
			@include  dashed;
		}
		
		.attr-list{
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2rpx;
			color: $font-color-base;
			padding-top: 30rpx;
			padding-left: 10rpx;
			.line{
				width: 100%;
				height: 4rpx;
				background-color: #282828;
			}
		}
		
		.buy-num {
			display:  flex;
			justify-content: space-between;
			align-items: center;
			@include  dashed;
			color: #686868;
			/deep/.buy-num-add-circle{
				.uni-numbox{
					&__plus, &__minus{
						background: #eee;
						display: inline-block !important;
						width:24px !important;
						height:24px !important;
						line-height: 24px !important;
						text-align: center;
						padding-bottom: 0 !important;
						.uni-numbox--text{
							color: #ffffff;
							display: inline-block;
						}
					}
				}
				// .uni-numbox__plus {
				// 	background: #eee;
				// 	display: inline-block !important;
				// 	width:24px !important;
				// 	height:24px !important;
				// 	line-height: 24px !important;
				// 	text-align: center;
				// 	padding-bottom: 0 !important;
				// 	.uni-numbox--text{
				// 		color: #ffffff;
				// 		display: inline-block;
				// 	}
				// }
				// .uni-numbox__minus {
				// 	background: #eee;
				// 	display: inline-block !important;
				// 	width:24px !important;
				// 	height:24px !important;
				// 	line-height: 24px !important;
				// 	text-align: center;
				// 	padding-bottom: 0 !important;
				// 	.uni-numbox--text{
				// 		color: #ffffff;
				// 		display: inline-block;
				// 	}
				// }
			}
		}
		
		.goods-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			background: #eee;
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.btn-wapper {
			display: flex;
		}
		
		.btn{
			flex: 1;
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 100rpx;
			background: #498FFF;
			font-size: $font-base + 2rpx;
			color: #fff;
			margin: 30rpx 10rpx 20rpx 10rpx;
			&.again-btn {
				background: #ffbf1c;
			}
		}
		
		.item-list{
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;
			border-top: 2rpx solid #b1b1b1;
			margin-top: 6rpx;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}
			.item-content {
				color: #262626;
				background-color: rgb(217,214,217);
				&.actived {
					border-color: #fe3a3a;
					color: snow;
					background-color: #498FFF;
				}
				&.noactived {
					background-color: #f4f4f4;
					border-color: #f4f4f4;
				}
			}
			.selected{
				background: #fbebee;
				color: $base-color;
			}
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}
}
</style>
